<template>
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.couponManual')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-form-item prop="discountCouponType"><!--券名称-->
                            <el-select v-model="form.discountCouponType" clearable :placeholder="$t('operation.couponName')" style="width: 100%">
                                <el-option v-for="(type, $index) in keyMap.couponType()" :key="$index" :label="type.label" :value="type.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><!--券名称-->
                    <el-col :span="4">
                        <el-form-item prop="discountAmount"><!--面额-->
                            <el-input v-model="form.discountAmount" :placeholder="$t('operation.discountAmount')" clearable></el-input>
                        </el-form-item>
                    </el-col><!--面额-->
                    <el-col :span="4">
                        <el-form-item prop="appName"><!--app名称-->
                            <el-select v-model="form.appName" :placeholder="$t('system.appName')" clearable style="width:100%;">
                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><!--app名称-->
                    <el-col :span="4">
                        <el-form-item prop="url"><!--链接-->
                            <el-input v-model="form.url" :placeholder="$t('operation.link')" clearable></el-input>
                        </el-form-item>
                    </el-col><!--链接-->
                    <el-col :span="4">
                        <el-form-item prop="operationUser"><!--操作员-->
                            <el-input v-model="form.operationUser" :placeholder="$t('common.operator1')" clearable></el-input>
                        </el-form-item>
                    </el-col><!--操作人-->
                    <el-col :span="4">
                        <el-form-item prop="serialNumber"><!--编号-->
                            <el-input v-model="form.serialNumber" :placeholder="$t('common.numbering')" clearable></el-input>
                        </el-form-item>
                    </el-col><!--编号-->
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-form-item prop="timeType"><!--选择时间-->
                            <el-select v-model="form.timeType" @change="handleTimeTypeChange" clearable :placeholder="$t('common.chooseTime')" style="width: 100%">
                                <el-option :label="$t('operation.issuanceTime')" value="startTime"></el-option><!--发放时间-->
                                <el-option :label="$t('operation.deadline')" value="dueTime"></el-option><!--到期时间-->
                            </el-select>
                        </el-form-item>
                    </el-col><!--选择时间-->
                    <el-col :span="8">
                        <el-form-item prop="applyTime" label=""><!--时间范围-->
                            <el-date-picker
                                style="width:100%"
                                :disabled="!form.timeType"
                                v-model="form.timeRange"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.startTime')"
                                :end-placeholder="$t('common.endTime')"></el-date-picker>
                        </el-form-item>
                    </el-col><!--时间范围-->
                    <el-col :span="8">
                        <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="issueCoupon" icon="el-icon-plus" type="primary">{{ $t('operation.issueCoupons') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="serialNumber" :label="$t('common.numbering')" min-width="150"></el-table-column><!--编号-->
                        <el-table-column prop="appName" :label="$t('system.appName')" min-width="120"></el-table-column><!--APP名称-->
                        <el-table-column prop="startTime" :label="$t('operation.issuanceTime')" min-width="180"><!--发放时间-->
                            <template slot-scope="{ row }">{{ row.startTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="discountCouponType" :label="$t('operation.couponName')" :min-width="$i18n.locale==='zhCN'?120:200">
                            <template slot-scope="{row}">{{ keyMap.couponType(row.discountCouponType) }}</template>
                        </el-table-column><!--券名称-->
                        <el-table-column prop="sendCount" :label="$t('common.quantity')" min-width="120"></el-table-column><!--数量-->
                        <el-table-column prop="discountAmount" :label="$t('operation.discountAmount')" min-width="120"></el-table-column><!--面额-->
                        <el-table-column prop="dueTime" :label="$t('operation.deadline')" min-width="180"><!--到期时间-->
                            <template slot-scope="{ row }">{{ row.dueTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="url" :label="$t('operation.link')" min-width="300"></el-table-column><!--链接-->
                        <el-table-column prop="remark" :label="$t('common.remark')" show-overflow-tooltip min-width="120"></el-table-column><!--备注-->
                        <el-table-column prop="operationUser" :label="$t('common.operator1')" min-width="120"></el-table-column><!--操作员-->
                        <el-table-column :label="$t('common.operation')" min-width="120"><!-- 操作 -->
                            <template slot-scope="{ row }">
                                <el-button @click="downloadPhoneList(row)" type="primary" size="mini">{{ $t('common.download') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"></pagination>
            </div>
        </div>

        <!--发放优惠券弹框-->
        <el-dialog
            :title="$t('operation.issueCoupons1')"
            :visible.sync="issueDialog.isVisible"
            width="700px"
            :close-on-click-modal="false"
            class="issueDialogForm"><!--优惠券发放-->
            <div>
                <el-form ref="issueDialog.form" :model="issueDialog.form" :rules="issueDialog.rules" >
                    <div class="box">
                        <div class="box-sort">
                            <!--券名称-->
                            <el-form-item prop="discountCouponType" :label="$t('operation.couponName')">
                                <el-select v-model="issueDialog.form.discountCouponType" :placeholder="$t('operation.couponName')" :clearable="true" style="width: 100%;">
                                    <el-option v-for="(type, $index) in keyMap.couponType()" :key="$index" :label="type.label" :value="type.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <!--App名称-->
                            <el-form-item prop="appName" :label="$t('system.appName')">
                                <el-select v-model="issueDialog.form.appName" :placeholder="$t('system.appName')" clearable style="width:100%;">
                                    <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <!--到期时间-->
                            <el-form-item prop="dueTime" :label="$t('operation.deadline')">
                                <el-date-picker
                                    v-model="issueDialog.form.dueTime"
                                    type="datetime"
                                    :picker-options="pickerOptions"
                                    default-time="23:59:59"
                                    value-format="timestamp"
                                    style="width: 100%"
                                    :placeholder="$t('operation.deadline')">
                                </el-date-picker>
                            </el-form-item>
                            <!--优惠券面额-->
                            <el-form-item prop="ticketAmount" :label="$t('operation.couponDiscountAmount')">
                                <el-input v-model="issueDialog.form.ticketAmount" :placeholder="$t('operation.couponDiscountAmount')" style="width: 100%"></el-input>
                            </el-form-item>
                        </div>
                        <div class="box-sort">
                            <!--手机号-->
                            <el-form-item prop="phone" :label="$t('common.mobileNumber')">
                                <el-input v-model="issueDialog.form.phone" :disabled="uploadLoading||Boolean(issueDialog.form.serialNumber&&issueDialog.form.serialNumber.length>0)" @change="changePhone" :placeholder="$t('common.mobileNumber')" maxlength="11" style="width: 100%"></el-input>
                            </el-form-item>
                            <!--手机号批量导入-->
                            <el-form-item prop="serialNumber" :label="$t('common.batchImportPhoneNum')">
                                <el-upload
                                    style="width: 100%;overflow: hidden;"
                                    ref="upload"
                                    :headers="uploadHeader"
                                    :show-file-list="false"
                                    name="file"
                                    :before-upload="beforeUpload"
                                    :on-success="uploadSuccess"
                                    :on-error="closeLoading"
                                    :disabled="uploadLoading||Boolean(issueDialog.form.phone)"
                                    :action="uploadUrl">
                                    <el-button :disabled="uploadLoading||Boolean(issueDialog.form.phone)" :loading="uploadLoading" slot="trigger" size="small" type="primary">{{ $t('common.pickerFile') }}</el-button><!--选取文件-->
                                    <el-button @click="downloadMobileExcel" size="small" style="margin:0 0 0 10px;">{{ $t('common.downloadTemplate') }}</el-button><!--点击下载导入模版-->
                                </el-upload>
                                <div v-if="issueDialog.form.serialNumber">{{ uploadLoadName }}<br/><span>{{ $t('common.success') }}：{{ uploadLoadSuccess }}</span>，<span>{{ $t('common.fail') }}：{{ uploadLoadFailed }}</span></div><!--成功: X, 失败: Y-->
                                <div v-else>{{ $t('common.notChooseFile') }}</div><!--未选择任何文件-->
                            </el-form-item>
                            <!--备注-->
                            <el-form-item prop="remark" :label="$t('common.remark')">
                                <el-input v-model="issueDialog.form.remark" type="textarea" maxlength="200" :rows="3"
                                          :placeholder="$t('verify.plsInputRemark')" style="width: 100%"></el-input><!--请输入备注-->
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="confirmInfo">
                <p class="title">{{ $t('operation.confirmCoupons') }}：</p><!--确认是否发放以下优惠券-->
                <p>{{ $t('operation.couponName') }}：{{ keyMap.couponType(issueDialog.form.discountCouponType) }}</p><!--券名称-->
                <p>{{ $t('common.quantity') }}：<span v-if="uploadLoadSuccess || uploadLoadSuccess === 0">{{ uploadLoadSuccess }}</span></p><!--数量-->
                <p>{{ $t('operation.discountAmount') }}：{{ issueDialog.form.ticketAmount }}</p><!--面额-->
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button :disabled="issueDialog.isDisabledBtn" type="primary" @click="issueCouponSubmit">{{ $t('operation.confirmIssue') }}</el-button><!--确认发放-->
                    <el-button @click="issueCouponClose">{{ $t('common.cancel') }}</el-button><!--取 消-->
                </span>
        </el-dialog>

        <!--优惠券发放结果-->
        <el-dialog
            :title="$t('operation.issueCouponsResult')"
            :visible.sync="issueResultDialog.isVisible"
            width="500px"
            :close-on-click-modal="false"
            class="issueDialogForm"><!--优惠券发放结果-->
            <div>
                <p>{{ $t('operation.issuanceTime') }}：{{ issueResultDialog.time | formatDate('yyyy-MM-dd hh:mm:ss') }}</p><!--发放时间-->
                <p>{{ $t('operation.issuanceSuccessCount', { x:issueResultDialog.success }) }}，{{ $t('operation.issuanceFailCount', { y:issueResultDialog.failed }) }}<!--，未发放：{{ issueResultDialog.undo }}个--></p><!--发放成功: X个，发放失败: Y个-->
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="issueResultDialog.isVisible = false">{{ $t('common.confirmOk') }}</el-button><!--确认-->
            </span>
        </el-dialog>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.issueDialogForm {
    .el-dialog__body {
        padding:10px 15px;
    }
    .el-dialog__header {
        text-align: center;
    }
    .el-dialog__footer {
        text-align: center;
        .el-button {
            margin:0 20px;
        }
    }
    .el-form-item {
        margin: 0 0 16px 0;
        padding:0 15px;
    }
    .el-form-item__label {
        line-height:30px;
    }
    .box {
        display: flex;
        .box-sort {
            flex: 1;
            overflow: hidden;
        }
    }
    .confirmInfo {
        border-top:1px solid #ddd;
        padding:15px 0 0 0;
        margin:10px 0 0 0;
        line-height:30px;
        .title {
            font-weight:bold;
            font-size: 16px;
        }
    }
}
</style>
